@extends('WShop::layout')

@push('styles')
    <link href="{{asset(config('view.frontend.wap_login').'/css/mui.picker.css')}}" rel="stylesheet" />
    <link href="{{asset(config('view.frontend.wap_login').'/css/mui.poppicker.css')}}" rel="stylesheet" />
@endpush
@section('content')
    @component('WShop::public.header')
        @slot('page_title'){{$page_title}} @endslot
        @slot('btn')
            <a href="{{route('f_Wap_Account_rgRecord')}}" class="mui-pull-right mui-text-bai" style="margin-top: 12px;font-size: 12px;">充值记录</a>
        @endslot
    @endcomponent
    <div class="mui-content mui-scroll-wrapper" id="pullrefresh" style="background: transparent;">
        <div class=" mui-scroll" style="background-color: #f5f5f5;    min-height: 100%;">
            <div class="mui-table-view mui-table-view-chevron mui-bottom">
                <div class="mui-queren-dingdan ">
                <form action="{{url()->current()}}" method="post" class="mui-table-view mui-table-view-chevron mui-bottom mui-user-xx" id="xianxia">
                    <p>因系统限制，现只能线下支付，请通过线下银行卡转账。</p>
                    @foreach($company_account as $item)
                       {{-- <p>账户{{$loop->index+1}}</p>--}}
                    <div  class="xinxi">
                        <li><span>收款账户</span><span>{{$item[0]}}</span></li>
                        <li>
                            <span>账号</span><span>{{$item[1]}}</span>
                        </li>
                        <li>
                            <span>开户行</span><span>{{$item[2]}}</span>
                        </li>
                    </div>
                        @break
                    @endforeach

                    <li class="mui-table-view-cell">
                    <div style="text-align: center;margin-top:0 ">微信收款码</div>
                    <img src="{{config('website.receiving_code')}}"  style="width: 250px;height: 250px;margin-top: 10px;margin-left: 6.5%" alt="">

                    </li>

                    <li class="mui-table-view-cell">
                        <div style="text-align: center;margin-top:0 ">支付宝收款码</div>
                        <img src="{{config('website.receiving_code_zfb')}}"  style="width: 250px;height: 250px;margin-top: 10px;margin-left: 6.5%" alt="">

                    </li>

                    <ul class="mui-table-view mui-table-view-radio bg-fff zhifu" style="margin: 10px 0 0 0;">
                        <li class="mui-table-view-cell mui-selected">
                            <a href="javascript:;" class="mui-navigate-right">
                                <img src="{{asset(config('view.frontend.wap_login').'/images/wallet.png')}}" alt="" width="25" class="mui-pull-left" />
                                <input type="radio" name="pay_type" checked value="2" />
                                <span style="float: right;color: red;margin-right: 30px;">{{get_currency()['money2']}}</span>
                            </a>
                        </li>
                    </ul>

                    <div class="input1">
                        <p style="background-color: #E8EFFE;text-align: center;font-size: 14px;padding: 5px;color: #dd524d; margin-bottom: 0;">最低充值金额{{get_rule('rg_min')}}且必须为{{get_rule('rg_mul')}}的整数倍@if(get_rule('rg_tax') > 0 && get_rule('rg_tax') <100),手续费{{get_rule('rg_tax')}}%@endif</p>
                        <input type="text" name="money" placeholder="请输入充值金额">
                        <textarea placeholder="备注" name="remark" style="border: none;font-size: 14px;color: inherit;"></textarea>
                    </div>

                    @if(config('website')['is_need_revoucher'])
                        <div class="mui-user-xx-header bg-fff">
                            <div style="margin-bottom: 10px;">汇款凭证</div>
                            <a href="javascript:;">
                                <img src="{{asset(config('view.frontend.wap_login').'/images/tu43.png')}}" width="45" id="preview" />
                                <input type="hidden" name="voucher" id="voucher" value="" />
                            </a>
                            <input type="file" class="mui-sc-pz" name="file" id = "input_file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="imgPreview(this)"  />
                        </div>
                    @endif
                    {{csrf_field()}}
                    <div class="btn"><button type="button">立即充值</button></div>
                </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        function imgPreview(fileDom) {

            //判断是否支持FileReader
            if(window.FileReader) {
                var reader = new FileReader();
            } else {
                alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
            }
            //获取文件
            var file = fileDom.files[0];
            var imageType = /^image\//;
            //是否是图片
            if(!imageType.test(file.type)) {
                mui.alert("请选择图片！");
                return;
            }
            //读取完成
            reader.onload = function(e) {
                //获取图片dom
                var img = document.getElementById("preview");
                //图片路径设置为读取的图片
                img.src = e.target.result;
                var load =  layer.open({type: 2});
                $.ajax({
                    type: 'post',
                    url: '{{route('f_Upload_uploadBase64')}}',
                    dataType: 'json',
                    data: {
                        imgField:'voucher',
                        voucher: e.target.result,
                        group:'voucher',
                        _token:'{{csrf_token()}}'
                    }
                }).done(function (response) {
                    if(response.status){
                        // console.log(response);
                        $('#voucher').val(response.data.url);
                    }else{
                        mui.toast(response.msg);
                    }
                }).fail(function (XMLHttpRequest) {
                    if (XMLHttpRequest.status == 422) {
                        mui.toast(XMLHttpRequest.responseJSON.msg);
                    }else{
                        mui.toast('网络异常,请检查连接');
                    }

                }).always(function () {
                    layer.close(load);
                });
            };
            reader.readAsDataURL(file);
        }

        $('.btn>button').click(function(){
            var form = $(this).parents('form');
            $.ajax({
                type: 'post',
                url: $(form).attr('action'),
                dataType: 'json',
                data: $(form).serialize()
            }).done(function (response) {
                if(response.status){
                    mui.toast(response.msg);
                    setTimeout(function () {
                        location.href = response.url;
                    }, 2000);
                }else{
                    mui.toast(response.msg);
                }
            }).fail(function (XMLHttpRequest) {
                if (XMLHttpRequest.status == 422) {
                    mui.toast('充值信息错误,请检查确认无误后再提交');
                }else{
                    mui.toast('网络异常,请检查连接');
                }

            }).always(function () {

            });
        })
    </script>
@endpush